/**
 * @desc 赛事执行-赛事内容
 * @author yd_zhaorongjun
 */
<template>
  <div v-loading="loading" class="contentBox fixBox">
    <div>
      <el-form ref="SiSTKWEventsManagementCreateCompetitionReportSettingInput" class="gl_form_mini" :model="SiSTKWEventsManagementCreateCompetitionReportSettingInput" :rules="SiSTKWEventsManagementCreateCompetitionReportSettingInput_Rules" label-position="right" label-width="180px" style="padding-right: 20px;overflow: hidden">
        <el-row :gutter="40" style="width:550px;margin:auto;padding:20px 0">
          <el-col :span="24">
            <!-- 添加报表赛事名称 -->
            <el-form-item label="添加报表赛事名称" prop="reportCompetitionName">
              <el-input v-model="SiSTKWEventsManagementCreateCompetitionReportSettingInput.reportCompetitionName" placeholder="请输入报表赛事名称" type="text" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <!-- 添加报表赛事地址 -->
            <el-form-item label="添加报表赛事地址" prop="reportCompetitionAddress">
              <el-input v-model="SiSTKWEventsManagementCreateCompetitionReportSettingInput.reportCompetitionAddress" placeholder="请输入报表赛事地址" type="text" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-row>
              <el-col :span="14">
                <!-- 添加报表赛事左LOGO -->
                <el-form-item label="添加报表赛事左LOGO">
                  <el-input v-show="false" v-model.trim="SiSTKWEventsManagementCreateCompetitionReportSettingInput.reportCompetitionLeftLogoImage" />
                  <photo-cropper-dialog ref="reportCompetitionLeftLogoImagePhotoCropper" @photoCropperSave="leftLogoPhotoCropperSave" />
                  <div class="upload_game_img" @click="openPhotoCropper('reportCompetitionLeftLogoImage')">
                    <img v-if="SiSTKWEventsManagementCreateCompetitionReportSettingInput.reportCompetitionLeftLogoImage" class="show_img" :src="getStaticFileUrl(SiSTKWEventsManagementCreateCompetitionReportSettingInput.reportCompetitionLeftLogoImage)" alt="">
                    <i v-else class="el-icon-plus" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-alert :closable="false" style="margin-top:10px" title="请上传彩色照片，JPG、PNG、JPEG格式文件大小10-1024KB" type="warning" />
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-row>
              <el-col :span="14">
                <!-- 添加报表赛事右LOGO -->
                <el-form-item label="添加报表赛事右LOGO">
                  <el-input v-show="false" v-model.trim="SiSTKWEventsManagementCreateCompetitionReportSettingInput.reportCompetitionRightLogoImage" />
                  <photo-cropper-dialog ref="reportCompetitionRightLogoImagePhotoCropper" @photoCropperSave="rightLogoPhotoCropperSave" />
                  <div class="upload_game_img" @click="openPhotoCropper('reportCompetitionRightLogoImage')">
                    <img v-if="SiSTKWEventsManagementCreateCompetitionReportSettingInput.reportCompetitionRightLogoImage" class="show_img" :src="getStaticFileUrl(SiSTKWEventsManagementCreateCompetitionReportSettingInput.reportCompetitionRightLogoImage)" alt="">
                    <i v-else class="el-icon-plus" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-alert :closable="false" style="margin-top:10px" title="请上传彩色照片，JPG、PNG、JPEG格式文件大小10-1024KB" type="warning" />
              </el-col>
            </el-row>
          </el-col>
          <el-col style="margin-left: 180px;width: 230px;">
            <el-button type="primary" size="mini" style="width:100%" @click="saveNew">{{ $t('button.save') }}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="centerLine">
      <div class="rightBox">
        <p>预览</p>
        <div class="previewBox">
          <ul>
            <li class="previewBox_left">
              <img v-if="SiSTKWEventsManagementCreateCompetitionReportSettingInput.reportCompetitionLeftLogoImage" class="show_img" :src="getStaticFileUrl(SiSTKWEventsManagementCreateCompetitionReportSettingInput.reportCompetitionLeftLogoImage)" alt="">
            </li>
            <li class="previewBox_center">
              <div class="previewBox_gameName">{{ SiSTKWEventsManagementCreateCompetitionReportSettingInput.reportCompetitionName }}</div>
            </li>
            <li class="previewBox_right">
              <img v-if="SiSTKWEventsManagementCreateCompetitionReportSettingInput.reportCompetitionRightLogoImage" class="show_img" :src="getStaticFileUrl(SiSTKWEventsManagementCreateCompetitionReportSettingInput.reportCompetitionRightLogoImage)" alt="">
            </li>
          </ul>
          <div class="previewBox_gameAddress">{{ SiSTKWEventsManagementCreateCompetitionReportSettingInput.reportCompetitionAddress }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import { mapState, mapActions } from 'vuex';
// import { translateByCode } from '@/lib/getTransData';
// import { CopyData } from '@/lib';
import { api_GET_EventsManagementCompetitionReportSettingWithCompetitionIdCompetitionId, api_POST_EventsManagementCompetitionReportSetting, api_PUT_EventsManagementCompetitionReportSettingId } from '@/extend/api/gameswaggerApi/app';
import { SiSTKWEventsManagementCreateCompetitionReportSettingInput } from '@/lib/form/game/swaggerForm';
import validator from '@/lib/validate/index.js';
import photoCropperDialog from './photoCropperDialog';
import defaultGameLogo from '@/assets/images/game/game_logoDefaultPhoto.png';
export default {
  name: 'GameContent',
  components: {
    photoCropperDialog
  },
  data() {
    return {
      action: `${WEB_CONFIG.VUE_APP_SWAGGER_GAME_BASE}/api/upload/document`,
      SiSTKWEventsManagementCreateCompetitionReportSettingInput: new SiSTKWEventsManagementCreateCompetitionReportSettingInput(),
      SiSTKWEventsManagementCreateCompetitionReportSettingInput_Rules: {
        reportCompetitionName: [
          validator.required('报表赛事名称不能为空')
        ],
        reportCompetitionAddress: [
          validator.required('报表赛事地址不能为空')
        ]
      },
      submitLoading: false,
      isNew: true, // 用于判断是新增和是更新
      defaultGameLogo: defaultGameLogo,
      gameId: '', // 赛事id
      reportId: '', // 报表配置id
      loading: false,
      areaList: [],
      actionUrlLeft: '', // 上传图片的地址
      actionUrlRight: '' // 上传图片的地址
    };
  },
  computed: {
  },
  created() {
    this.gameId = this.$route.params.id;
    this.api_GET_EventsManagementCompetitionReportSettingWithCompetitionIdCompetitionId();
  },
  methods: {
    // 按赛事ID获取赛事报表配置
    api_GET_EventsManagementCompetitionReportSettingWithCompetitionIdCompetitionId() {
      const _this = this;
      this.loading = true;
      api_GET_EventsManagementCompetitionReportSettingWithCompetitionIdCompetitionId(_this.gameId).then(res => {
        console.log(res);
        if (res) {
          _this.SiSTKWEventsManagementCreateCompetitionReportSettingInput = res;
          _this.reportId = res.id;
          _this.isNew = false;
        } else {
          _this.SiSTKWEventsManagementCreateCompetitionReportSettingInput = new SiSTKWEventsManagementCreateCompetitionReportSettingInput();
          _this.isNew = true;
        }
        this.loading = false;
      }, () => {
        _this.$message({ type: 'error', message: '获取项目类别列表失败' });
        this.loading = false;
      });
    },
    // 保存
    saveNew(data) {
      const _this = this;
      _this.submitLoading = true;
      _this.SiSTKWEventsManagementCreateCompetitionReportSettingInput.competitionId = _this.gameId;
      if (this.isNew) {
        api_POST_EventsManagementCompetitionReportSetting(_this.SiSTKWEventsManagementCreateCompetitionReportSettingInput).then(res => {
          this.$message({
            // 保存成功！
            message: '保存成功！',
            type: 'success'
          });
          _this.submitLoading = false;
        })
          .catch(() => {
            _this.submitLoading = false;
          });
      } else {
        api_PUT_EventsManagementCompetitionReportSettingId(_this.reportId, _this.SiSTKWEventsManagementCreateCompetitionReportSettingInput).then(res => {
          this.$message({
            // 更新成功！
            message: '更新成功！',
            type: 'success'
          });
          _this.submitLoading = false;
        })
          .catch(() => {
            _this.submitLoading = false;
          });
      }
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // logo回显
    leftLogoPhotoCropperSave(fileUrl) {
      this.$set(this.SiSTKWEventsManagementCreateCompetitionReportSettingInput, 'reportCompetitionLeftLogoImage', fileUrl.tempUrl);
    },
    // logo回显
    rightLogoPhotoCropperSave(fileUrl) {
      this.$set(this.SiSTKWEventsManagementCreateCompetitionReportSettingInput, 'reportCompetitionRightLogoImage', fileUrl.tempUrl);
    },
    openPhotoCropper(code) {
      this.$refs[code + 'PhotoCropper'].open(this.SiSTKWEventsManagementCreateCompetitionReportSettingInput[code]);
    }
  }
};
</script>
<style scoped>
  .upload_game_img {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 20px;
    border: 1px dotted #DCDFE6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .upload_game_img:hover {
    border-color: #409eff;
  }
  .upload_game_img .show_img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
  }
  .contentBox{
    border: 1px solid #D2D2D2;
    padding-top: 20px;
    border-radius: 6px;
    margin: 0 20px;
    padding: 20px 0;
  }
  .fixBox{
    /* min-width: 1205px; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .centerLine{
    /* border-left: 1px solid #D2D2D2; */
    height: 370px;
    /* overflow: auto; */
    min-width: 632px;
  }
  .rightBox{
    margin: 0 auto;
    width: 600px;
    /* padding:20px 0px */
  }
  .previewBox{
    border: 1px solid #D2D2D2;
    border-radius: 6px;
    padding: 30px 20px;
    margin-top: 15px;
    width: 603px;
  }
  .previewBox ul{
    overflow: hidden;
  }
  .previewBox ul li{
    float: left;
    text-align: center;
  }
  .previewBox ul li img{
    width: 100%;
  }
  .previewBox_left{
    width: 100px;
    height:100px;
  }
  .previewBox_center{
    width: 358px;
    height: 100px;
  }
  .previewBox_right{
    width: 100px;
    height:100px;
  }
  .previewBox_gameName{
    font-size: 18px;
    font-weight: bold;
    margin-top: 22px;
  }
  .previewBox_gameAddress{
    font-size: 15px;
    font-weight: bold;
    margin-top: 30px;
    text-align: right;
  }
</style>
